<template>
	<view class="me-login-type">
		<block v-for="(item,index) in otherdata" :key="index">
			<view class="login-type-item" :class="item.itemClass" @tap="otherlogin(item)">
				<view class="icon iconfont" :class="item.icon"></view>
			</view>
		</block>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				otherdata:[
					{
						name:'微信登录',
						icon:'icon-weixin',
						itemClass:'item-wx',
						id:'weixin'
					},
					{
						name:'微博登录',
						icon:'icon-xinlangweibo',
						itemClass:'item-wb',
						id:'sinaweibo'
					},
					{
						name:'qq登录',
						icon:'icon-QQ',
						itemClass:'item-qq',
						id:'qq'
					}
				]
			}
		},
		methods:{
			otherlogin(val){
				switch (val.id){
					case 'weixin':
					uni.login({
						 provider: 'weixin',
						  success: function (loginRes) {
						    console.log(JSON.stringify(loginRes.authResult));
						  }
					})
					break
					case 'sinaweibo':
					uni.login({
						 provider: 'sinaweibo', 
						  success: function (loginRes) {
						    console.log(JSON.stringify(loginRes.authResult));
						  }
					})
					break
					case 'qq':
					uni.login({
						 provider: 'qq', 
						  success: function (loginRes) {
						    console.log(JSON.stringify(loginRes.authResult));
						  }
					})
					break
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.me-login-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 100upx;
	
		.login-type-item {
			width: 120upx;
			height: 120upx;
			border-radius: 100%;
			line-height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
	
			&>view {
				color: #ffffff;
				font-size: 55upx;
			}
		}
	
		.item-wx {
			background-color: #2BD19B;
		}
	
		.item-qq {
			background-color: #2CAEFC;
		}
	
		.item-wb {
			background-color: #FC7729;
		}
	}
</style>
